<template>
	<view class="settlement-details" v-if="ruleForm">
		<view class="u-font-30 u-text-center u-margin-top-60">结算金额</view>
		<view class="account">
			<text class="u-font-36">{{ruleForm.currency}}</text>
			<text class="u-margin-left-10">{{ruleForm.amount | thousands}}</text>
		</view>

		<view class="settlement-body">
			<view class="title">银行信息</view>
			<view class="u-margin-top-30 u-font-28 u-flex u-row-between">
				<view style="color: #666666;">结算银行</view>
				<view>{{ ruleForm.bankName }}</view>
			</view>
			<view class="u-margin-top-24 u-font-28 u-flex u-row-between">
				<view style="color: #666666;">银行账号</view>
				<view>{{ ruleForm.accountNo }}</view>
			</view>
			<view class="u-margin-top-24 u-margin-bottom-30 u-font-28 u-flex u-row-between">
				<view style="color: #666666;">账号名称</view>
				<view>{{ ruleForm.accountName }}</view>
			</view>
			<u-line color="#F2F2F2" />
			<view class="title u-margin-top-30 u-margin-bottom-30">结算交易订单</view>
			<view class="order-number">
				<view class="number"  v-for="(item, index) in ruleForm.orderIdList" :key="index">
					 {{ item }}
				</view>
			</view>
		</view>
		<view class="settlement-body" v-if="ruleForm.payProofUrl">
			<view class="title">上传附件</view>
			<view class="u-margin-top-30 u-font-28 u-flex u-row-between u-padding-bottom-10">
				<view style="color: #666666;">支付凭证</view>
				<view class="u-flex" @click="openFile(ruleForm.payProofUrl)">
					<image class="file-icon" src="@/static/img/icon_view@2x.png"></image>
					<text class="u-margin-left-10">查看</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		openFile
	} from '@/utils/index.js'
	export default {
		data(){
			return {
				ruleForm:null
			}
		},
		onLoad(options) {
			this.$api.getSettlementDetails(options).then(res=>{
				this.ruleForm = res.result
			})
		},
		methods:{
			openFile
		}
	}
</script>

<style scoped lang="less">
	.settlement-details {
		color: #202020;

		.account {
			font-weight: bold;
			font-size: 32px;
			margin-top: 10px;
			margin-bottom: 30px;
			text-align: center;
		}

		.settlement-body {
			background: #FFFFFF;
			box-shadow: 0px 2 4px 0px rgba(217, 226, 233, 0.38);
			border-radius: 12px;
			margin: 0 15px 10px 15px;
			padding: 15px 15px 10px 15px;
		}

		.title {
			font-size: 16px;
			font-weight: 500;
		}

		.file-icon {
			width: 16px;
			height: 16px;
		}

		.order-number {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.number {
				background: rgba(15, 189, 127, 0.07);
				border-radius: 3px;
				padding: 5px 8px;
				color: #0FBD7F;
				font-size: 11px;
				margin-bottom: 5px;
				margin-right: 5px;
			}
		}
	}
</style>
<style>
	page {
		background: #F7F7F7;
	}
</style>